<template>
	<view v-if="nowItem" @click="toDetail(nowItem)" class="relatedBox">
		<!-- <image class="isBg" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/bg_indexImg.png"></image> -->
		<view class="content">
			<image lazy-load class="imgBox" :src="nowItem.coverImgUrl"></image>
			<view class="isTitle">{{ nowItem.title }}</view>
			<view style="text-align: center;color: #B3B3B3;font-size: 28rpx;margin-top: 2rpx;margin-bottom: 17rpx;">
				{{ nowItem.finish ? '已完结共' + nowItem.updateOfEpisodes + '集' : '更新至第' + nowItem.updateOfEpisodes + '集' }}
			</view>
			<view v-if="nowItem.compilationsLabels" class="isLabel">
				<view class="imgLabel" v-for="(labelItem, labelIndex) in nowItem.compilationsLabels" :class="'labelColor'" style="margin-right: 13rpx;">
					{{ labelItem.compilationsLabelTypeName }}
				</view>
			</view>
			<view v-if="!nowItem.subscribe && !subscribeIdObj[nowItem.id]"  @click="isZj" class="jjBtn">加入追剧</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		subscribeIdObj: {
			default: () => {
				return {};
			},
			type: Object
		},
		title: {
			default: '猜你喜欢',
			type: String
		},
		list: {
			default: () => {
				return [];
			},
			type: Array
		}
	},
	data() {
		return {
			hideZj: false,
			nowItem: ''
		};
	},
	methods: {
		isZj() {
			this.hideZj = true;
			this.zwyRequest({
				header: {
					'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
				},
				url: '/cdp/compilations/subscribe',
				data: {
					id: this.nowItem.id
				},
				method: 'POST'
			}).then(res => {
				uni.showToast({
					title: '追剧成功',
					icon: 'none'
				});
				this.zjClick();
			});
		},
		zjClick() {
			let nowItem = JSON.parse(JSON.stringify(this.nowItem));
			nowItem['subscribe'] = true;
			this.nowItem = JSON.parse(JSON.stringify(nowItem));
		},
		getBannerList() {
			let tempList = this.list.map((item, index) => {
				item = item.contentInfo;
				item['index'] = index;
				return item;
			});
			this.nowItem = tempList[0];
		},
		toDetail(item, type) {
			this.$uma && this.$uma.trackEvent('Ume_skip', {
				name: 'Ume_skip_page1_oneLike'
			});
			console.log('item', item);
			this.zwyRouter(`/pages/video/video?fakeId=${item.fakeId}&compilationId=${item.compilationId}`);
		}
	},
	created() {
		this.getBannerList();
	}
};
</script>

<style lang="scss" scoped>
.labelColor {
	background-color: #ffe4e2;
	color: #fb4b06 !important;
}
.imgLabel {
	margin-right: 5rpx;
	font-size: 24rpx;
	color: white;
	width: 63rpx;
	height: 34rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4rpx;
}
.labelColor0 {
	background: linear-gradient(225deg, rgba(255, 185, 92, 1) 0%, rgba(247, 123, 0, 1) 100%);
}
.labelColor2 {
	background: linear-gradient(225deg, rgba(155, 226, 91, 1) 0%, rgba(99, 171, 21, 1) 100%);
}
.labelColor1 {
	background: linear-gradient(225deg, rgb(250, 132, 162) 0%, rgb(255, 129, 160) 30%);
}
.labelColor3 {
	background: linear-gradient(225deg, rgba(255, 185, 92, 1) 0%, rgba(247, 123, 0, 1) 100%);
}
.labelColor4 {
	background: linear-gradient(225deg, rgb(11, 185, 234) 0%, rgb(72, 211, 250) 100%);
}
.labelColor5 {
	background: linear-gradient(225deg, rgb(220, 124, 253) 0%, rgb(248, 83, 246) 100%);
}
.jjBtn {
	width: 580rpx;
	height: 88rpx;
	border: 1rpx solid #017AFF;
	border-radius: 45rpx;
	text-align: center;
	line-height: 88rpx;
	color: #017AFF;
	font-size: 32rpx;
	font-weight: bold;
}
.isLabel {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 31rpx;
}
.content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.isTitle {
	font-size: 42rpx;
	font-weight: bold;
	color: #333333;
}
.imgBox {
	width: 250rpx;
	margin-top: 55rpx;
	height: 326rpx;
	border-radius: 8rpx;
	margin-bottom: 10rpx;
}
.isBg {
	width: 162rpx;
	height: 82rpx;
	position: absolute;
	left: 0;
	right: 0;
}
.content {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 0 5%;
	box-sizing: border-box;
	justify-content: space-between;
}
.relatedBox {
	.isDesc {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #b5b5b5;
	}
	width: 710rpx;
	padding-bottom: 42rpx;
	margin-bottom: 30rpx;
	position: relative;
	background: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/index_bg_center1.png') no-repeat center center;
	background-size: 100% 100%;
	box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0, 0, 0, 0.06);
	border-radius: 50rpx;
	overflow: hidden;
}
</style>
